<template>
	<view class="settlement-content">
		<view class="settlement-list">

			<!-- 工时 -->
			<view>
				<view class="msg-title">
					<view class="left-item">
						<view class="left-title">维修项目/合计<u-icon name="rmb" color="#000" size="22"></u-icon>
							{{form.wCoSts || 0}}
						</view>
					</view>
				</view>
				<view class="item-data-solid">
					<view class="item-data">
						<view class="item-data-title">标准工时</view>
						<view v-for="(item,index) in shrinklist" class="item-data-list">
							<view>{{item.label}}</view>
							<view class="item-money">
								<u-icon v-if="item.model !=='discount'" name="rmb" color="#000" size="22"></u-icon>
								<view>{{form[item.model] || 0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 备件 -->
			<view>
				<view class="msg-title">
					<view class="left-item">
						<view class="left-title">维修备件/合计<u-icon name="rmb" color="#000" size="22"></u-icon>
							{{form.wCoSts || 0}}
						</view>
					</view>
				</view>
				<view class="item-data-solid">
					<view class="item-data">
						<view class="item-data-title">备件费用</view>
						<view v-for="(item,index) in sparelist" class="item-data-list">
							<view>{{item.label}}</view>
							<view class="item-money">
								<u-icon v-if="item.model !=='discount'" name="rmb" color="#000" size="22"></u-icon>
								<view>{{form[item.model] || 0}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 其他 -->
			<view class="item-other">
				<view class="item-other-item">
					<view>其他费用</view>
					<view>合计<u-icon name="rmb" color="#000" size="22"></u-icon>{{form['oCoSts'] || 0}}</view>
				</view>
			</view>

			<view class="totalNum-text">应收合计：<view class="totalNum">
					<u-icon name="rmb" color="#000" size="30"></u-icon>{{form.totals || 0}}
				</view>
			</view>
		</view>
		<!-- <view class="payment">
			<view>付款信息</view>
			<view class="payment-content" v-for="(item,index) in modeList" :key="index">
				<view class="information">
					<view class="payment-left">
						<view class="payment-image">
							<u-icon :name="item.iconName" color="#fff" size="54"></u-icon>
						</view>
						<view class="payment-text">
							<view class="mode">
								{{item.modeName}}
								<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
							</view>
							<view class="remark">
								<u-input v-model="modeList[index].remark" :type="textType" :border="false"  placeholder="请输入备注"/>
							</view>
						</view>
					</view>
					<view class="payment-right" @click="moneyBtn(modeList[index].modeName)">
						<u-icon name="rmb" color="#000" size="28"></u-icon>
						<text>{{modeList[index].money || 0}}</text>
					</view>
				</view>
			</view>
		</view> -->


		<!-- 底部按钮区域 -->
		<!-- <view :class="[{'bottom-btn':currentStep === 4,'bottom-btn1':currentStep === 5}]">
			<u-button v-for="(item,index) in currentStep === 4?btnList:btnList1" :key="index" :type="item.type" :style="currentStep === 4?btnWidth:btnWidth1"
				@click="cancelSettlement(item.label)">{{item.label}}</u-button>
		</view> -->

		<!-- 增加付款方式 弹出框 -->
		<!-- <u-popup v-model="showAdd" mode="bottom" height="400rpx">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="checkboxContent">
					<view class="margin">请添加付款方式</view>
					<view class="margin item">
						<u-checkbox 
							v-model="item.checked" 
							v-for="(item, index) in addMethodList" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>{{item.name}}</u-checkbox>
					</view>
					<view class="margin btn">
						<u-button type="primary" @click="closeAdd">确认</u-button>
					</view>
				</view>
			</u-checkbox-group>
		</u-popup> -->

		<!-- 金额输入弹窗 -->
		<!-- <u-popup v-model="moneyShow" mode="bottom" height="400rpx">
			<view class="checkboxContent">
				<text class="margin">请输入金额</text>
				<u-number-box v-model="moneyValue" @change="valChange" input-width="200" input-height="100"></u-number-box>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import category from './category.vue';
	export default {
		components: {
			category,
		},
		props: {
			// currentStep: {type:Number,default:4},
			form2: { // 维修工单查询的信息
				type: Object,
				default: {},
			},
		},
		watch: {
			// 子页面数据
			form2: {
				handler(val) {
					let arr = Object.keys(val)
					if (arr.length > 0) {
						this.form = this.form2
						this.wisList = this.form.listMapWi || this.form.wisList || []
						this.partsList = this.form.listMapPart || this.form.partsList || []
						this.othersList = this.form.listMapOther || this.form.othersList || []
					}
					this.form.discount = '100%'
					this.$forceUpdate()
				},
				deep: true
			},
		},
		data() {
			return {
				// textType: 'text',
				// showAdd: false,//添加付款方式弹窗
				// moneyShow: false,//金额输入弹窗
				// moneyValue: 0,
				// modeMarking:'',//金额付款方式标记
				// addSelect:[],//添加的付款方式
				form: {},
				wisList: [], //维修项目
				partsList: [], //维修备件
				othersList: [], //其他费用
				//维修页面请求数据
				shrinklist: [{
						label: '工时费用',
						model: 'wCoSts'
					},
					{
						label: '工时折扣',
						model: 'discount'
					}, {
						label: '应收费用',
						model: 'wCoSts'
					}
				],
				sparelist: [{
					label: '备件费用',
					model: 'pCoSts'
				}, {
					label: '备件折扣',
					model: 'discount'
				}, {
					label: '应收费用',
					model: 'pCoSts'
				}],
				otherlist: [{
					label: '其他费用',
				}],

				// shrinklist: [{
				// 		label: '工时',
				// 		model: 'saleWiQty'
				// 	}, {
				// 		label: '费用',
				// 		model: 'wiPrice'
				// 	},
				// 	{
				// 		label: '维修类别',
				// 		model: 'retRepairType'
				// 	}, {
				// 		label: '是否委外',
				// 		model: 'isEntrust'
				// 	}
				// ],
				// sparelist: [{
				// 	label: '数量',
				// 	model: 'partQty',
				// 	type: 'number'
				// }, {
				// 	label: '费用',
				// 	model: 'partPrice'
				// }, {
				// 	label: '维修类别',
				// 	model: 'retRepairType'
				// }, {
				// 	label: '是否委外',
				// 	model: 'isEntrust'
				// }],
				// otherlist: [{
				// 	label: '费用',
				// 	model: 'otherPrice'
				// }, {
				// 	label: '维修类别',
				// 	model: 'retRepairType'
				// }
				// ],



				// modeList: [{
				// 	iconName: 'red-packet-fill',
				// 	modeName: '现金'
				// }, {
				// 	iconName: 'red-packet-fill',
				// 	modeName: 'APP'
				// }, {
				// 	iconName: 'red-packet-fill',
				// 	modeName: 'POS'
				// }],
				// 结算-底部按钮
				// btnList:[{
				// 		label: '保存',
				// 		type: 'plain',
				// 	},{
				// 		label: '结算申请',
				// 		type: 'primary',
				// 	}],
			}
		},
		// watch:{
		// 	moneyShow(val){
		// 		this.modeList.find(o=>o.modeName === this.modeMarking).money=this.moneyValue
		// 	}
		// },
		methods: {
			//复选框变动
			// checkboxGroupChange(val){},

			// 关闭新增支付方式弹窗
			// closeAdd(){
			// 	this.showAdd = false
			// 	// 筛选出勾选的
			// 	let arr = this.addMethodList.filter(o=>o.checked === true)
			// 	this.addSelect = arr.map(o=>o.name)

			// 	// 删除
			// 	for(let i=0;i<this.modeList.length;i++){
			// 		if(!this.addSelect.includes(this.modeList[i].modeName)){
			// 			this.modeList.splice(i,1)
			// 			i--
			// 		}
			// 	}

			// 	// 增加
			// 	for(let i=0;i<this.modeList.length;i++){
			// 		let oldArr=this.modeList.map(o=>{
			// 			return o.modeName
			// 		})
			// 		if(!oldArr.includes(this.addSelect[i])){
			// 			const newObj={
			// 				iconName: 'red-packet-fill',
			// 				modeName: this.addSelect[i]
			// 			}
			// 			this.modeList.push(newObj)
			// 		}
			// 	}
			// },

			// 填写金额按钮
			// moneyBtn(name){
			// 	this.modeMarking = name

			// 	if(!this.modeList.find(o=>o.modeName === name).money){
			// 		this.moneyValue = 0
			// 	}else {
			// 		this.moneyValue = this.modeList.find(o=>o.modeName === name).money
			// 	}
			// 	this.moneyShow = true
			// },

			// 金额变动
			// valChange(e) {
			// 	this.modeList.find(o=>o.modeName === this.modeMarking).money=this.moneyValue
			// }

		},
	}
</script>

<style lang="scss" scoped>
	.settlement-list {
		// padding: 20rpx;
		background-color: #fff;

		.msg-title {
			border-bottom: 1rpx solid #D9D9D9;
			.left-item {
				display: flex;
				flex-direction: row;
				padding: 20rpx 0;
				margin: 0 12rpx;
				// border-bottom: 1rpx solid #D9D9D9;
				font-size: 30rpx;
			}
		}

		.item-data-solid {
			width: 100%;
			padding: 0 20rpx;
			border-bottom: 1rpx solid #D9D9D9;

			.item-data {
				display: flex;
				padding: 15rpx 0;
				margin: 16rpx 8rpx;
				flex-direction: column;

				.item-data-title {
					padding-bottom: 10rpx;
					font-size: 30rpx;
				}

				.item-data-list {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 1rpx;
					padding:10rpx 0;

					.item-money {
						display: flex;
						flex-direction: row;
					}
				}
			}
			
		}
		.item-other {
			padding: 20rpx 20rpx;
			border-bottom: 1rpx solid #D9D9D9;
			
			.item-other-item{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
	}






	.settlement-content {
		margin-top: 16rpx;

		.settlement-list {
			margin: 0 24rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
		.totalNum-text {
			display: flex;
			justify-content: flex-end;
			padding: 16rpx 16rpx 100rpx 16rpx;
		}
	}

	// 付款部分
	// 	.payment {
	// 		margin: 16rpx 24rpx;
	// 		border-radius: 10rpx;
	// 		background-color: #fff;
	// 		padding: 24rpx;

	// 		.payment-content {
	// 			display: flex;
	// 			flex-direction: column;
	// 			padding: 20rpx 0;

	// 			// 付款选择信息
	// 			.information {
	// 				display: flex;
	// 				justify-content: space-between;

	// 				.payment-left {
	// 					display: flex;

	// 					.payment-image {
	// 						display: flex;
	// 						align-items: center;
	// 						justify-content: center;
	// 						background-color: #3173cd;
	// 						width: 73rpx;
	// 						height: 73rpx;
	// 						border-radius: 50%;
	// 						overflow: hidden;
	// 						margin-right: 12rpx;
	// 					}

	// 					.payment-text {
	// 						display: flex;
	// 						flex-direction: column;
	// 						max-width: 390rpx;

	// 						.mode {
	// 							margin: 15rpx 2rpx;
	// 						}

	// 						.remark {
	// 							color: #b3b3b3;
	// 							display: -webkit-box;
	// 							text-overflow: ellipsis;
	// 							overflow: hidden;
	// 							-webkit-box-orient: vertical;
	// 							-webkit-line-clamp: 2;
	// 						}
	// 					}
	// 				}
	// 				.payment-right {}
	// 			}
	// 		}
	// 	}
	// 	.addMethod {
	// 		padding: 0 20rpx;
	// 	}

	// 	.bottom-btn {
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: space-between;
	// 		background-color: #fff;
	// 		padding: 20rpx;
	// 		margin-top: 20rpx;
	// 	}
	// 	.bottom-btn1 {
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: center;
	// 		background-color: #fff;
	// 		padding: 20rpx 24rpx;
	// 		margin-top: 20rpx;
	// 	}

	// 	// 添加付款方式
	// 	.checkboxContent {
	// 		display: flex;
	// 		flex-direction: column;
	// 		padding: 20rpx 30rpx;

	// 		.margin {
	// 			margin-bottom: 30rpx;
	// 		}

	// 		:first-child {
	// 			display: flex;
	// 			justify-content: center;
	// 			font-weight: bold;
	// 			font-size: 40rpx;
	// 		}
	// 		.item {
	// 			display: flex;
	// 			flex-direction: row;
	// 			flex-wrap: wrap;
	// 		}
	// 		.btn {
	// 			display: flex;
	// 			justify-content: flex-end;
	// 		}
	// 	}
	// }
</style>
